<template>
  <Panel>
    <template v-slot:header> 商品添加 </template>
    <template v-slot:con>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="category">
          <el-select v-model="ruleForm.cate" placeholder="请选择商品分类">
            <el-option
              :label="item.cateName"
              :value="item.cateName"
              v-for="item in category"
              :key="item.cateName"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number
            v-model="ruleForm.price"
            @change="handleChange"
            :min="1"
          ></el-input-number>
        </el-form-item>

        <!-- 图片上传 -->
        <el-form-item label="商品图片">
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="商品描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addpro">立即创建</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { addCate, addPro, cateGories } from "../../api/pro.js";
export default {
  created() {
    this.categories();
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      ruleForm: {
        name: "",
        cate: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
      },
      category: [],
    };
  },
  methods: {
    //   图片上传
    handleAvatarSuccess(res, file) {
      this.ruleForm.imgUrl = res.imgUrl;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 下拉
    handleChange(value) {
      console.log(value);
    },

    // 获取分类
    async categories() {
      const { categories } = await cateGories({});
      this.category = categories;
    },

    // 点击添加商品信息
    async addpro() {
      const data = await addPro({
        name: this.ruleForm.name,
        category: this.ruleForm.cate,
        price: this.ruleForm.price,
        imgUrl: this.ruleForm.imgUrl,
        goodsDesc: this.ruleForm.goodsDesc,
      });
      if (data.code === 0) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        this.$router.push("/pro/list");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 400px;
}
</style>